<template>
  <div
    v-if="!initializing"
    class="vc-component"
    :style="visual.parseStyle(currNode.currStyle)"
  >
    <el-cascader
      ref="cascader"
      v-model="currValue"
      v-bind="options"
      :options="areaList"
      :props="{
        value: 'id',
        label: 'text',
        children: 'children',
        leaf: 'isLeaf',
        checkStrictly: props.checkStrictly
      }"
      @change="handleChange"
      style="width: 100%"
    />
  </div>
</template>

<script setup>
import { ref, computed, inject, getCurrentInstance, nextTick, onMounted } from 'vue';
import visual from "@/visual/js/visual";
import EventHandler from "@/visual/js/event";
import { useAreaStore } from "@/pinia/modules/area";

const props = defineProps({
  node: Object
});
const areaStore = useAreaStore();
const initializing = ref(true);
const pageData = inject("pageData", ref({}));
const currValue = ref([]);
const currNode = ref(props.node);
const areaList = ref([]);
const eventHandler = new EventHandler(
  inject('eventHandler', Function, true),
  getCurrentInstance(),
  currNode.value
);

const init = async(styleId) => {
  initializing.value = true;
  visual.initStyle(currNode.value, styleId);
  await nextTick(() => initializing.value = false);
};

const loadValue = async() => {
  const dataList = (await visual.loadData(currNode.value.compData, eventHandler, getData(), currNode.value)).data || [];
  let defaultValue =  dataList && dataList.length > 0 && dataList[0]['内容'] || '';
  if (defaultValue) {
    if (defaultValue.startsWith('156,')) {
      defaultValue = defaultValue.substring(4);
    } else {
      if (!defaultValue.includes(',')) {
        const resultList = [];
        if (defaultValue.endsWith('0000')) {
          resultList.push(defaultValue);
        } else if (defaultValue.endsWith('00')) {
          resultList.push(defaultValue.substring(0, defaultValue.length - 4) + '0000');
          resultList.push(defaultValue);
        } else {
          resultList.push(defaultValue.substring(0, defaultValue.length - 4) + '0000');
          resultList.push(defaultValue.substring(0, defaultValue.length - 2) + '00');
          resultList.push(defaultValue);
        }
        defaultValue = resultList.join(',');
      }
    }
  }

  currValue.value = defaultValue ? defaultValue.split(',') : [];
  pageData.value[currNode.value.name] = currValue.value.length > 0
    ? currValue.value[currValue.value.length - 1] : '';
};

const options = computed(() => {
  const compStyle = currNode.value.currCompStyle || {};
  const options = {};
  visual.addIfNotNull(options, compStyle, 'size');
  visual.addIfNotNull(options, compStyle, 'placeholder');
  visual.addIfNotNull(options, compStyle, 'showAllLevels');
  visual.addIfNotNull(options, compStyle, 'required');
  visual.addIfNotNull(options, compStyle, 'filterable');
  visual.addIfNotNull(options, compStyle, 'clearable');
  visual.addIfNotNull(options, compStyle, 'disabled');
  return options;
});

const handleChange = () => {
  if (currValue.value && currValue.value.length > 0) {
    pageData.value[currNode.value.name] = currValue.value[currValue.value.length - 1];
  } else {
    pageData.value[currNode.value.name] = '';
  }
  eventHandler.trigger('变更事件');
};

const getData = () => {
  return {
    inputParam: currNode.value.inputParam,
    value: pageData.value[currNode.value.name]
  };
};

const changeStyle = (styleId) => {
  init(styleId);
};

const refresh = async() => {
  initializing.value = true;
  await loadValue();
  await nextTick(() => initializing.value = false);
};

const loadData = async() => {
  const res = await areaStore.getAreaList();
  areaList.value = res && res.length > 0 && res[0].children || [];
};

onMounted(async() => {
  await loadData();
  await init();
  await loadValue();
  await eventHandler.trigger('初始化事件');
});

defineExpose({ getData, changeStyle, refresh });
</script>